<template>
  <div class='app-container'>
    <div class='app-box'>
      <div class='boxinput1'>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">

          <el-row :gutter="25">
            <el-col :span="10">
              <el-form-item label="日期类型" label-width='90px' class='fontColor toLeft' required>
                
                  <el-form-item prop="dateType" style="display:inline-block">
                    <el-select v-model="form.dateType" placeholder="请选择" size="mini" class='wd130 wdSS'>
                      <el-option v-for="item in timeOptions" :key="item.id" :label="item.value" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                
               
                  <el-form-item prop="dateTypeBeginDate"  style="display:inline-block">
                    <el-date-picker v-model="timeCon" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" @change='getTimeCon' value-format='yyyy-MM-dd' :default-time="['00:00:00', '23:59:59']" size="mini" :picker-options="pickerOptions" class='inputbox datebox'>
                    </el-date-picker>
                  </el-form-item>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="保险公司" label-width='90px' class='fontColor toLeft'>
                <el-select v-model="form.insuranceId" placeholder="请选择保险公司" class='inputbox wd230' size='mini' @change='getinsurancestaffs'>
                  <el-option-group v-for="group in items" :key="group.letter" :label="group.letter">
                    <el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName
                      " :value="item.id">
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :push="1">
              <el-form-item label="工　号" label-width='90px' class='fontColor toLeft'>
                <el-select v-model="form.staffId" placeholder="请选择工号" size='mini' class='inputbox wd230'>
                  <el-option v-for="item in items1" :key="item.id" :label="item.staffAccount" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="25" class='boxinput2' type='flex'>
            <el-col :span="10">
              <el-form-item label="组织机构" label-width='90px' class='fontColor inputbox toLeft'>
                <!-- <tree-select :open="true" :treeData="treeData" :treeProps="treeProps" v-model="form.organzationId" :multiple="false" placeholder="请选择组织" @setSelectedId="setSelectedId">
                </tree-select> -->
                <ztree-select class="wd500 inputbox" v-model="form.organzationId" :treedata="treeData" :childprops="childprops" @change='setSelectedId'></ztree-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务归属" label-width='90px' class='fontColor toLeft'>
                <el-select v-model="form.salesmanId" class='inputbox wd230' placeholder="请选择业务归属" size='mini' filterable>
                  <el-option v-for="item in users" :key="item.id" :label="item.organzationName" :value="item.organzationId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :push="1">
              <el-form-item label="保单号" label-width='90px' class='inputbox fontColor toLeft'>
                <el-input v-model="form.guaranteeSlipNumber" placeholder="请输入内容" size='mini' class='inputbox wd230'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5" class='boxinput2' type='flex'>
            <el-col :span="6">
              <el-form-item label="上游结算状态" label-width='90px' class='fontColor toLeft'>
                <el-select v-model="id4" class='inputbox wd130' size='mini'>
                  <el-option v-for="item in isActive" :key="item.id" :label="item.content
                        " :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="下游结算状态" label-width='100px' class='fontColor toLeft'>
                <el-select v-model="id5" class='inputbox wd130' size='mini'>
                  <el-option v-for="item in isActive2" :key="item.id" :label="item.content
                        " :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span='24'></el-col>
            <el-col :span='24'></el-col>
            <el-col :span='2'>
              <div class='search'>
                <el-button size="mini" type='primary' icon="iconfont icon-sousuo" @click='search("form")'>搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class='util-table le_change'>
        <el-table :data="baodan2" style='width:100%' stripe v-loading='isloading'>
          <el-table-column width='60'>
            <template slot-scope='scope'>
              <span class="edspan1" v-if='scope.row.guaranteeSlipType==1'>商</span>
              <span class='edspan2' v-if='scope.row.guaranteeSlipType==2'>交</span>
            </template>
          </el-table-column>
          <el-table-column label="保单信息" class='font' width="260">
            <template slot-scope="scope">
              <div class='insurance'>
                <div><span class='policyNumber lianjie'>
                    <a v-if="scope.row.isCorrect" style="color:#027dca;" @click="toDetail1(1,scope.row.id)">
                      <!-- :to="{ name: 'endorsementDetail', params: { id:scope.row.id }}" -->
                      {{scope.row.guaranteeSlipNumber}}
                    </a>
                    <a v-else style="color:#027dca;" @click="toDetail1(2,scope.row.id)">
                      <!-- :to="{ name: 'policydetail', params: { id:scope.row.id }}" -->
                      {{scope.row.guaranteeSlipNumber}}
                    </a>
                  </span>
                  <span>&nbsp;&nbsp;{{scope.row.insuranceName}}
                  </span>
                </div>
                <span class='license licensesize'>{{scope.row.plateNumber}}</span><span class='licensesize overLo'>{{scope.row.customerName}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="业务归属" class='font'>
            <template slot-scope="scope">
              <div>{{scope.row.name}}</div>
              <!--  <div>{{scope.row.organizationUnitName}}</div> -->
              <el-tooltip placement="bottom" effect="light">
                <div slot="content">{{scope.row.chargerOrganizationFullName}}</div>
                <span class='licensesize'>{{scope.row.organizationUnitName | lastname}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="上游结算" header-align='center' class='font '>
            <el-table-column prop="name" label="政策金额(元)" header-align='right'>
              <template slot-scope="scope">
                <div class='cost'>{{scope.row.upperTotalCost|numFilter}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="实结(元)" header-align='right'>
              <template slot-scope='scope'>
                <!-- <div class='cost' v-if='scope.row.upperSettleState==-1'>-</div> -->
                <div class='cost' v-if='scope.row.upperSettleState==0 || scope.row.upperSettleState==-1' @click="dsettlement(scope.row.id,0)"><a class='links'>上游结算</a></div>
                <div class='cost' v-if='scope.row.upperSettleState==1'>
                  <span class='costcolor' v-if='scope.row.upperATotalCost!=scope.row.upperTotalCost.toFixed(2)'>{{scope.row.upperATotalCost|numFilter}}</span>
                  <span v-if='scope.row.upperATotalCost==scope.row.upperTotalCost.toFixed(2)'>{{scope.row.upperATotalCost|numFilter}}</span>
                  <!-- <span v-if='scope.row.upperATotalCost>scope.row.upperTotalCost'>{{scope.row.upperATotalCost|numFilter}}</span> -->
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="结算日期" header-align='right'>
              <template slot-scope='scope'>
                <div v-if="scope.row.upperSettleDate" class='cost'>{{scope.row.upperSettleDate}}</div>
                <div v-else class='cost'>-</div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="date" label="下游结算" header-align='center' class='font'>
            <el-table-column prop="name" label="政策金额(元)" header-align='right'>
              <template slot-scope='scope'>
                <div class='cost'>{{scope.row.lowerTotalCost|numFilter}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="实结(元)" header-align='right'>
              <template slot-scope='scope'>
                <div class='cost' v-if='scope.row.lowerSettleState==0 || scope.row.lowerSettleState==-1' @click="dsettlement(scope.row.id,1)"><a class='links'>下游结算</a>
                </div>
                <div class='cost' v-if='scope.row.lowerSettleState==1'>
                  <span class='costcolor' v-if='scope.row.lowerATotalCost!=scope.row.lowerTotalCost'>{{scope.row.lowerATotalCost|numFilter}}</span>
                  <span v-if='scope.row.lowerATotalCost==scope.row.lowerTotalCost'>{{scope.row.lowerATotalCost|numFilter}}</span>

                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作人/日期" header-align='right'>
              <template slot-scope='scope'>
                <div v-if="scope.row.lowOperator" class='cost'>
                  {{scope.row.lowOperator}}
                </div>
                <div v-else class='cost'>
                  -
                </div>
                <div v-if="scope.row.lowerSettleDate" class='licensesize cost'>{{scope.row.lowerSettleDate}}</div>
                <div v-else class='licensesize cost'>-</div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="user-page">
        <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next,jumper" :total="pagedata.total"></el-pagination>

      </div>
      <layer :isShow='isshow' :title="title" :datas="datas" :types="querytype" :save="save" :closeLayer="closeLayer" :quit='closeLayer'></layer>
    </div>
  </div>
</template>
<script>
import treeSelect from "@/components/tree-select/tree.vue";
import ztreeSelect from "@/components/z-select/index.vue";
import layer from "./../layer/";
import Vue from "vue";
export default {
  components: {
    treeSelect,
    layer,
    ztreeSelect
  },
  data() {
    return {
      //数组子级相关参数
      childprops: {
        name: "displayName", //显示名字
        children: "orgs", //子级字段名
        lv: "depth" //当前层级
      },
      isshow: false,
      title: "实结手续费修改",
      querytype: 1,
      timeAround: [],
      timeAround2: [],
      staffList: null,
      isloading: false,
      loading: false,
      DateType: 1,
      users: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "本周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              var day = new Date();
              var num = day.getDay() - 1;
              start.setTime(day.setDate(day.getDate() - num)); //本周第一天
              end.setTime(day.setDate(day.getDate() + 6)); //本周最后一天
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              var day = new Date();
              var num = day.getDay() - 1 + 7;
              start.setTime(day.setDate(day.getDate() - num)); //上周第一天
              end.setTime(day.setDate(day.getDate() + 6)); //上周最后一天
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              var day = new Date();
              start.setTime(day.setDate(1)); //本月第一天
              day.setMonth(day.getMonth() + 1); //下个月
              end.setTime(day.setDate(day.getDate() - 1)); //下个月第一天减1得到本月最后一天
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              var day = new Date();
              day.setMonth(day.getMonth() - 1);
              start.setTime(day.setDate(1)); //上月第一天
              day.setMonth(day.getMonth() + 1); //下个月
              end.setTime(day.setDate(day.getDate() - 1)); //下个月第一天减1得到本月最后一天
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }, //快捷选项
      value1: "",
      value2: "",
      treeData: [],
      pagedata: {},
      open: "",
      items: [],
      yewuyuan: "",
      form: {
        insuranceId: "",
        staffId: "",
        salesmanId: ""
      },
      treeProps: {
        label: "displayName",
        children: "orgs",
        level: "depth",
        value: "id"
      },
      insurance: "",
      organizationUnitId: "",
      gonghao: "",
      items1: "",
      baodan2: [],
      data: {
        value: ""
      },
      timeOptions: [
        {
          id: 1,
          type: 1,
          value: "支付日期"
        },
        {
          id: 2,
          type: 2,
          value: "签单日期"
        },
        {
          id: 3,
          type: 3,
          value: "核保日期"
        },
        {
          id: 4,
          type: 4,
          value: "保单起保日期"
        },
        {
          id: 5,
          type: 5,
          value: "保单到期日期"
        },
        {
          id: 6,
          type: 6,
          value: "登记系统日期"
        },
        {
          id: 7,
          type: 7,
          value: "下游结算日期"
        },
        {
          id: 8,
          type: 8,
          value: "上游结算日期"
        }
      ],
      timeCon: [],
      datas: null,
      id: "",
      pagetotal: null,
      currentPage: 1,
      isActive: [
        {
          id: "0",
          content: "全部"
        },
        {
          id: "1",
          content: "已结算"
        },
        {
          id: "2",
          content: "未结算"
        },
        {
          id: "3",
          content: "未登记"
        }
      ],
      id4: "0",
      isActive2: [
        {
          id: "0",
          content: "全部"
        },
        {
          id: "1",
          content: "已结算"
        },
        {
          id: "2",
          content: "未结算"
        }
      ],
      id5: "0",
      rules: {
        dateType: [
          {
            required: true,
            message: "日期类型",
            trigger: "change"
          }
        ],
        dateTypeBeginDate: [
          {
            required: true,
            message: "请选择日期范围",
            trigger: "change"
          }
        ]
      }
    };
  },
  filters: {
    lastname(val) {
      let index = val.lastIndexOf("-");
      if (index !== "-1") {
        let sli = val.substr(index + 1, val.length);
        return sli;
      }
    },
    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if (val || val == 0) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      }
    }
  },
  created() {
    this.groupList();
    this.getUnits();
    // this.getusers();
    // this.getelementlist();
    this.getUserList();
    this.getinsurancestaffs();
  },
  methods: {
    toDetail1(type, id) {
      console.log(id);
      var val;
      if (type == 1) {
        val = "endorsementDetail";
      } else {
        val = "policydetail";
      }
      let routeData = this.$router.resolve({
        name: val,
        params: {
          id: id
        }
      });
      window.open(routeData.href, "_blank");
    },
    dsettlement(id, val) {
      if (val == 0) {
        this.querytype = 1;
      } else {
        this.querytype = 2;
      }
      this.datas = {
        id: id
      };
      this.isshow = true;
    },
    // setSelectedId(val) {
    //   console.log(val);
    //   this.form.organzationId = val;
    // },
    getUnits() {
      let params = {
        queryType: 1
      };
      this.post(
        params,
        "services/app/common/GetCurrentOrganizationUnitsByType"
      ).then(rs => {
        console.log("组织机构" + rs);
        if (rs.success) {
          let data = rs.result;
          let arr = [];
          arr.push(data);
          this.treeData = arr;
          // console.log(rs.result);
          // console.log(this.treeData);
          // console.log('-----------');
        }
      });
    },
    setSelectedId(val) {
      Vue.set(this.form, "salesmanId", "");
      let params = {
        organzationId: val
      };
      this.post(params, "services/app/common/CurrentBusinessAscription").then(
        rs => {
          if (rs.success) {
            let result = rs.result.items;
            this.users = result;
            // this.form.salesmanId=rs.result.items[0].organzationId
          }
        }
      );
    },
    getUserList() {
      this.post({}, "services/app/common/CurrentBusinessAscription").then(
        rs => {
          if (rs.success) {
            let result = rs.result.items;
            this.users = result;
            //  this.formLabel.UserId=rs.result.items[0].organzationId
          }
        }
      );
    },
    groupList() {
      let all = {
        letter: "",
        insurances: [{ insuranceName: "全部保险公司", id: "" }]
      };
      let params = {
        // id:val,
      };
      this.post(params, "services/app/common/GetGroupInsurances").then(re => {
        if (re.success) {
          this.items = re.result.items;
          let result = re.result.items;
          result.unshift(all);
          console.log(result);
          this.options1 = result;
        }
      });
    },
    // getusers() {
    //   let all = { id: "", userName: "全部业务员" };
    //   let params = {};
    //   this.post(params, "services/app/common/GetCurrentUsers").then(rs => {
    //     console.log(rs);
    //     if (rs.success) {
    //       let result = rs.result.users;
    //       result.unshift(all);
    //       this.users = result;
    //     }
    //   });
    // },
    getinsurancestaffs(val) {
      this.gonghao = "";
      let all = { id: "", staffAccount: "全部工号", describe: "" };
      let params = {
        id: val
      };
      this.post(params, "services/app/common/GetCurrentInsuranceStaffs").then(
        rs => {
          console.log(rs);
          if (rs.success) {
            let result = rs.result.items;
            result.unshift(all);
            this.items1 = result;
            for (let i = 0; i < this.items1.length; i++) {
              //staffAccount
              if (this.items1[i].describe != "") {
                this.items1[i].staffAccount =
                  this.items1[i].staffAccount +
                  " (" +
                  this.items1[i].describe +
                  ")";
              } else {
                this.items1[i].staffAccount = this.items1[i].staffAccount;
              }
            }
            if (val == "" || val == null) {
              this.items1 = [];
              this.items1.push(all);
            }
          }
        }
      );
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(val);
      this.getelementlist(val);
    },
    getTimeCon() {
      console.log(this.timeCon);
      this.form.dateTypeBeginDate = this.timeCon[0];
      this.form.dateTypeEndDate = this.timeCon[1];
    },
    getTimeAround() {
      this.form.upperSettleBeginDate = this.timeAround[0];
      this.form.upperSettleEndDate = this.timeAround[1];
    },
    getTimeAround2() {
      this.form.lowerSettleBeginDate = this.timeAround2[0];
      this.form.lowerSettleEndDate = this.timeAround2[1];
    },

    getelementlist(pageindex) {
      // let params={
      //    pageIndex:pageindex,
      //    upperSettleState:this.id4,
      //    lowerSettleState:this.id5,
      //    guaranteeState:this.id6,
      // };
      this.isloading = true;
      let params = this.form;
      params.pageIndex = pageindex;
      params.upperSettleState = this.id4;
      params.lowerSettleState = this.id5;
      params.guaranteeState = this.id6;
      params.ChargerOrganization = this.form.salesmanId;
      this.post(params, "services/app/settle/SettlementList").then(rs => {
        if (rs.success) {
          let items2 = rs.result.items;
          this.isloading = false;
          console.log(items2);
          this.baodan2 = items2;
          let totalCount = rs.result.totalCount;
          //分页配置
          this.pagedata.total = totalCount;
          if (pageindex) {
            this.currentPage = pageindex;
          } else {
            this.currentPage = 1;
          }
        }
      });
    },
    save(data) {
      let params = {
        settleTypes: this.querytype,
        guaranteeSlipId: data.guaranteeSliId,
        aRemark: data.aRemark,
        aPoundageRatio: data.aPoundageRatio / 100,
        aPoundage: data.aPoundage,
        aVehicleAndVesselTaxRatio: data.aVehicleAndVesselTaxRatio / 100,
        aVehicleAndVesselTax: data.aVehicleAndVesselTax,
        aAdditionalRewardRatio: data.aAdditionalRewardRatio / 100,
        aAdditionalReward: data.aAdditionalReward,
        premiumType:data.premiumType
      };
      this.post(params, "services/app/settle/SettleDetailSettle").then(rs => {
        if (rs.success) {
          this.getelementlist(this.currentPage);
        }
      });
      console.log(data);
      this.isshow = false;
    },
    closeLayer() {
      this.isshow = false;
    },

    search(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getelementlist();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
     
    }
  }
};
</script>
<style lang="scss" scoped>
.wd500 {
  width: 365px;
}
.wd120 {
  width: 120px;
}
.overLo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 135px;
  display: inline-block;
  position: relative;
  top: 5px;
}
.icon-bianji {
  padding: 0 0 0 4px;
  font-size: 14px;
  color: #027dca;
}
.app-box {
  .wd130 {
    width: 130px;
  }
  .fontColor {
    color: #666;
  }
  .user-page {
    text-align: right;
    margin-top: 50px;
  }
  .util-table {
    margin-top: 8px;
    .font {
      font-size: 14px;
      color: #fff;
    }
    .licensesize {
      color: #666;
    }
    .cost {
      text-align: right;
      .costcolor {
        color: #cf1322;
      }
    }
    .policyNumber {
      min-width: 170px;
      display: inline-block;
    }
    .lianjie:hover {
      color: #027dca;
      cursor: pointer;
      text-decoration: underline;
    }
    .license {
      min-width: 100px;
      display: inline-block;
    }
    .edspan1 {
      display: inline-block;
      width: 25px;
      height: 25px;
      background: #39b96c;
      border-radius: 6px;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }
    .edspan2 {
      display: inline-block;
      width: 25px;
      height: 25px;
      background: #3c8cbd;
      border-radius: 6px;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }

    th {
      background-color: #334750;
    }
  }
}

@media screen and (max-width: 1280px) {
  .inputbox {
    width: 120px;
  }
  .wd500 {
    width: 180px;
  }
  .wdSS {
    width: 100px;
  }
  .datebox {
    width: 180px;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1300px) {
  .inputbox {
    width: 130px;
  }
  .wd500 {
    width: 200px;
  }
  .wdSS {
    width: 120px;
  }
  .datebox {
    width: 180px;
  }
}
@media screen and (min-width: 1301px) and (max-width: 1400px) {
  .inputbox {
    width: 180px;
  }
  .wdSS {
    width: 120px;
  }
  .wd500 {
    width: 220px;
  }
  .datebox {
    width: 190px;
  }
}
</style>
